<template>
  <div :class="['large-text', $slots['left'] ? 'large-text-left' : 'large-text-right']">
    <div :class="['title', $slots['left'] ? 'title-left' : '']">
      <div>
        <slot name="left"></slot>
      </div>
    </div>
    <slot name="img"></slot>
    <div :class="['title', $slots['right'] ? 'title-right' : '']">
      <div>
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    // console.log(this.$slots)
  }
}
</script>

<style lang="less" scoped>
  .large-text {
    padding: 120px 0 80px;
    background: #fff;
    position: relative;

    &.large-text-right {
      padding-right: 276px;
    }

    &.large-text-left {
      padding-left: 276px;
    }

    ::v-deep(.el-image) {
      width: 100%;
      height: 860px;
    }

    .title {
      font-size: 44px;
      font-weight: 600;
      color: #000;
      letter-spacing: 8px;
      right: 149px;
      top: 120px;
      position: absolute;
    }

    .title-left {
      left: 149px;
    }

    .title-right {
      right: 149px;
    }
  }
</style>